<template>
	<view style="width: 330rpx;overflow: hidden;">
		<view class="teacup-loading" :style="[headerStyle]">
			<view class="glass"></view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			//总杯数
			num: {
				type: [String, Number],
				default: 6
			},
			//当前喝水杯数
			finishNum: {
				type: [String, Number],
				default: 1
			}
		},
		watch: {
			num(newValue, oldValue) {
				this.headerStyle = {
					'--height--': `${(350/this.num)*this.finishNum}rpx`,
					'--width--': `${(44*(100/this.num))+500}rpx`
				}
			},
			finishNum(newValue, oldValue) {
				this.headerStyle = {
					'--height--': `${(350/this.num)*this.finishNum}rpx`,
					'--width--': `${(44*(100/this.num))+500}rpx`
				}
			}
		},
		data() {
			return {
				headerStyle: {
					'--height--': `${(350/this.num)*this.finishNum}rpx`,
					'--width--': `${(44*(100/this.num))+500}rpx`
				}
			}
		},

	}
</script>

<style lang="scss">
	.teacup-loading {
		/*相对定位 作为绝对定位元素的父容器*/
		position: relative;
		/*弹性布局，容器内元素水平居中*/
		display: flex;
		justify-content: center;

		/*设置水杯外形、大小及颜色*/
		// border: 4rpx solid #2EA7E0;
		border-radius: 0 0 16rpx 16rpx;
		border-top-width: 0;
		width: 330rpx;
		height: 430rpx;
		/*设置进度百分比文字样式*/
		font-size: 12rpx;
		font-weight: bold;
		line-height: 24rpx;
		color: rgb(30, 29, 20);
		/*隐藏溢出的内部元素*/
		overflow: hidden;
		/*设置3D模式下Z轴偏移量为0*/
		transform: translateZ(0);

		.glass {
			position: absolute;
			width: 330rpx;
			height: 430rpx;
			background-image: url('http://static.bsyjk.cn/shoppingMall/13AD70AEE88A45E79B002B624DC23DBB.png');
			background-size: 100% 100%;
			z-index: 9999;
		}

	}

	.teacup-loading::before,
	.teacup-loading::after {
		content: '';
		/*绝对定位元素*/
		position: absolute;
		/*设置元素的位置*/
		bottom: 50rpx;
		left: 0;
		z-index: 1;
		right: -120rpx;
		height: var(--height--);
		width: var(--width--);
		// width: 00rpx;
		/*自定义多边形*/
		clip-path: polygon(0% 20%,
				2% 18%,
				3% 16%,
				5% 14%,
				7% 13%,
				8% 11%,
				10% 10%,
				12% 10%,
				13% 10%,
				15% 10%,
				17% 11%,
				18% 13%,
				20% 14%,
				22% 16%,
				23% 18%,
				25% 20%,
				27% 22%,
				28% 24%,
				30% 26%,
				32% 27%,
				33% 29%,
				35% 30%,
				37% 30%,
				38% 30%,
				40% 30%,
				42% 29%,
				43% 27%,
				45% 26%,
				47% 24%,
				48% 22%,
				50% 20%,
				52% 18%,
				53% 16%,
				55% 14%,
				57% 13%,
				58% 11%,
				60% 10%,
				62% 10%,
				63% 10%,
				65% 10%,
				67% 11%,
				68% 13%,
				70% 14%,
				72% 16%,
				73% 18%,
				75% 20%,
				77% 22%,
				78% 24%,
				80% 26%,
				82% 27%,
				83% 29%,
				85% 30%,
				87% 30%,
				88% 30%,
				90% 30%,
				92% 29%,
				93% 27%,
				95% 26%,
				97% 24%,
				98% 22%,
				100% 20%,
				100% 100%,
				0% 100%);
	}

	.teacup-loading::before {
		background-color: rgb(255, 214, 125);
		animation: move1 6s linear infinite;
	}

	.teacup-loading::after {
		background-color: rgb(255, 174, 0);
		animation: move2 3s linear infinite;
	}

	@keyframes move1 {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-60rpx);
		}
	}

	@keyframes move2 {
		0% {
			transform: translateX(-20rpx);
		}

		100% {
			transform: translateX(-100rpx);
		}
	}
</style>
